<template>
  <div class="newOrder">
    <el-breadcrumb separator="/" class="drugRecommend-breadcrumb">
      <el-breadcrumb-item
      ><span style="font-size: 16px">接单管理</span></el-breadcrumb-item
      >
      <el-breadcrumb-item
      ><span style="font-size: 18px">最新接单</span></el-breadcrumb-item
      >
    </el-breadcrumb>
    <div class="center">
      <div class="filter">
        <el-button @click="lookAll">查看全部</el-button>
        <span class="addressFilter">地区筛选：</span
        >
        <el-cascader
            :options="options"
            :props="{ expandTrigger: 'hover' }"
            clearable
            v-model="areaArr"
            @change="chooseArea()"
        >
        </el-cascader>
        <el-button @click="selectWithAddress">筛选</el-button>
        <span class="search">精确搜索：</span>
        <el-input
            placeholder="请输入内容"
            v-model="input"
            class="input-with-select"
            clearable
        >
          <el-select v-model="select" slot="prepend" placeholder="请选择">
            <el-option label="订单编号" value="1"></el-option>
            <el-option label="客户名" value="2"></el-option>
            <el-option label="联系方式" value="3"></el-option>
          </el-select>
          <el-button
              slot="append"
              icon="el-icon-search"
              @click="searchWithContent"
          ></el-button>
        </el-input>
      </div>
      <div class="table">
        <el-table :data="newOrders" v-loading="loading" style="width: 100%">
          <el-table-column label="序号" width="50">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="下单时间" width="180">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 6px">{{ scope.row.gmtCreate }}</span>
            </template>
          </el-table-column>
          <el-table-column label="订单编号" width="190">
            <template slot-scope="scope">
              <span>{{ scope.row.orderId }}</span>
            </template>
          </el-table-column>
          <el-table-column label="客户名" width="90">
            <template slot-scope="scope">
              <span>{{ scope.row.receiptName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="联系方式" width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.phone }}</span>
            </template>
          </el-table-column>
          <el-table-column label="所在地区" width="180">
            <template slot-scope="scope">
              <span>{{ showAddress(scope.row.receiptAddress) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="交易金额 (元)" width="110">
            <template slot-scope="scope">
              <span>￥{{ parseFloat(scope.row.payment).toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="购买 (种)" width="80">
            <template slot-scope="scope">
              <span>{{ scope.row.itemAmount }} </span>
            </template>
          </el-table-column>
          <el-table-column label="交易状态" width="90">
            <template slot-scope="scope">
              <el-tag :type="type" size="medium">{{
                  showStatus(scope.row.status)
                }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <OrderDetails :detailsInfo="scope.row" class="OrderDetails">
                详细
              </OrderDetails>
              <el-button size="mini" type="primary" @click="sendDrug(scope.row)">路径规划</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-drawer
          title="路径规划"
          :before-close="handleClose"
          :visible.sync="dialog"
          direction="ltr"
          custom-class="demo-drawer"
          ref="drawer"
          @open="initMap"
      >
        <div class="demo-drawer__content">
          <div class="app-container">
            <ul v-for="item in instructionArr" v-if="ulShow">
              <li>{{item}}</li>
            </ul>
            <!--  <div id="guide-map" style="margin:0px auto;width:500px;height: 300px;"></div>-->
          </div>
        </div>
      </el-drawer>
      <div class="pagination">
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {CodeToText, regionData} from "element-china-area-data";
import OrderDetails from "@/admin/order/components/OrderDetails";
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  components: {
    OrderDetails,
  },
  data(){
    return {
      flag: 0,
      // 选项
      options: regionData,
      // 选中的值用数组存储
      areaArr: [],
      // 搜索的内容
      input: "",
      // 搜索的前缀
      select: "",
      // 是否加载动画
      loading: true,
      // 新增订单
      newOrders: [],
      // 当前页
      current: 1,
      // 每页个数
      pageSize: 10,
      // 可选择每页个数
      pageSizes: [10, 20, 30, 50],
      // 总数
      total: 10,
      receiptAddress: '',
      instructionArr:[],//路径规划中文介绍
      polylineArr:[],//路径规划线路经纬度
      ulShow:false,
      dialog: false,
      type: "",
    }
  },
  methods: {
    handleClose(done) {
      this.dialog = false;
      this.ulShow = false;
    },
    //初始化地图
    initMap() {
      AMapLoader.reset()
      AMapLoader.load({
        key: '22eb2a5d976ac6fc90e501c3264d30dd',
        version: '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Marker'], // 需要使用的的插件列表
        AMapUI: {
          version: '1.1',
          plugins: []
        }
      }).then((AMap) => {
        // 初始化地图
        this.map = new AMap.Map('guide-map', {
          viewMode: "2D", //  是否为3D地图模式
          zoom: 13, // 初始化地图级别
          resizeEnable: true,
          willreadoften: true,
          center:this.mapCenter
        });
        //鼠标点击事件
      }).catch(e => {
        console.log(e);
      });
    },
    // 查看全部
    lookAll() {
      this.flag = 0;
      this.getNewOrderList();
    },
    // 区域地址改变
    chooseArea() {
      // 展示的你选择的值 是一个areaCode
      console.log("chooseArea ==> ", this.areaArr);
      // 把areaCode转换成地名并拼接起来
      let str = "";
      for (let i = 0; i < this.areaArr.length; i++) {
        str += CodeToText[this.areaArr[i]] + "/";
      }
      console.log(str.substring(0, str.length - 1));
      this.receiptAddress = str.substring(0, str.length - 1);
    },
    // 根据地址筛选
    selectWithAddress() {
      if (this.receiptAddress != "") {
        this.flag = 1;
        this.getNewOrderList();
      }
    },
    // 搜索
    searchWithContent() {
      if (this.select != "" && this.input != "") {
        this.flag = 2;
        this.getNewOrderList();
      }
    },
    // 去除地址的 / ，拼接
    showAddress(address) {
      if (address != "" && address != null) {
        let arr = address.split("/");
        let str = "";
        for (const item of arr) {
          str += item;
        }
        return str;
      }
    },
    /* 展示对应状态 */
    showStatus(status) {
      switch (status) {
        case -1:
          this.type = "danger";
          return "被投诉";
        case 0:
          this.type = "warning";
          return "交易取消";
        case 1:
          this.type = "info";
          return "未派单";
        case 2:
          this.type = "";
          return "已派单";
        case 4:
          this.type = "success";
          return "完成服务";
        default:
          return "未知";
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.current = val;
    },
    // 获取新增订单
    getNewOrderList() {
      // 未派单的status == 1
      const status = 4;
      if (this.flag == 0) {
        this.$axios
            .get(
                `/admin/emp/itemorder/${this.current}/${this.pageSize}/${status}?emp=${sessionStorage.getItem('realName')}`
            )
            .then((res) => {
              console.log("----最新订单==>", res);
              this.newOrders = res.data.data.responseBody.orderList;
              this.total = res.data.data.responseBody.total;
              this.loading = false;
            });
      } else if (this.flag == 1) {
        let formData = new FormData();
        formData.append("receiptAddress", this.receiptAddress);
        formData.append("current", this.current);
        formData.append("size", this.pageSize);
        formData.append("status", status);
        this.$axios.post("/admin/orderWith/address", formData).then((res) => {
          console.log("最新订单==>", res);
          this.newOrders = res.data.data.responseBody.orderList;
          this.total = res.data.data.responseBody.total;
          this.loading = false;
        });
      } else if (this.flag == 2) {
        let formData = new FormData();
        formData.append("type", this.select);
        formData.append("content", this.input.trim());
        formData.append("current", this.current);
        formData.append("size", this.pageSize);
        formData.append("status", status);
        this.$axios.post("/admin/orderWith/search", formData).then((res) => {
          console.log("最新订单==>", res);
          this.newOrders = res.data.data.responseBody.orderList;
          this.total = res.data.data.responseBody.total;
          this.loading = false;
        });
      }
    },
    // 派单操作
    sendDrug(order) {
      this.ulShow=true
      this.dialog = true
      console.log(order.orderId)
      this.instructionArr = []
      this.polylineArr = []
      this.$axios.get("/admin/order/getOrderDesc?orderId="+order.orderId).then((res) => {
        res.data.data.responseBody.desList.forEach((item,index)=>{
          this.instructionArr.push(item.instruction)
        })

      });
      this.$axios.get("/admin/order/getOrderPath?orderId="+order.orderId).then((res) => {
        this.polylineArr = res.data.data.responseBody.pathList
      });

    },
  },
  created() {
    this.getNewOrderList();
  },
  watch: {
    current: "getNewOrderList",
    pageSize: "getNewOrderList",
  },
}
</script>

<style scoped>
@import "./style/NewOrder.css";
</style>
